<script setup>
import { useUserStore } from '@/stores/user';
// eslint-disable-next-line no-unused-vars
import { Dialog, Toast } from 'vant';
import api4j from '@/api/example';
import { EiInfo } from '@eplat/ei';

const router = useRouter();
const user = useUserStore();
const loading1 = ref(false);
const finish1 = ref(false);
const loading2 = ref(false);
const finish2 = ref(false);
const loading3 = ref(false);
const finish3 = ref(false);
const loading4 = ref(false);
const finish4 = ref(false);
const loading5 = ref(false);
const finish5 = ref(false);
const loading6 = ref(false);
const finish6 = ref(false);

let active1 = 0;
let active2 = 0;
const page1 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page2 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page3 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page4 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page5 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});
const page6 = reactive({
  pageSize: 10,
  currentPage: 0,
  result: []
});

const onLoad1 = async () => {
  loading1.value = true;
  applyList1();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading1.value = false;
};
const bxTotal = ref(0);
const tsTotal = ref(0);
const wxTotal = async () => {
  const postEiInfo = new EiInfo();
  postEiInfo.set('gzCode', user.getGZCode);
  await api4j
    .RCRM0103_gzWxTOTAL(postEiInfo)
    .then((res) => {
      // 获取 repreStatus < 30 的数据个数
      bxTotal.value = res.extAttr.totalswx.reduce((count, item) => {
        return count + (parseInt(item.repareStatus) < 30 ? 1 : 0);
      }, 0);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const TsTotal = async () => {
  const postEiInfo = new EiInfo();
  postEiInfo.set('gzCode', user.getGZCode);
  await api4j
    .RCRM0103_gzTsTOTAL(postEiInfo)
    .then((res) => {
      console.log('222', res);
      // 获取 repreStatus < 30 的数据个数
      tsTotal.value = res.extAttr.totalsts.reduce((count, item) => {
        return count + (parseInt(item.complaintStatus) < 30 ? 1 : 0);
      }, 0);
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const onLoad2 = async () => {
  loading2.value = true;
  applyList2();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading2.value = false;
};
const onLoad3 = async () => {
  loading3.value = true;
  applyList3();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading3.value = false;
};
function formatDateTime(dateTimeString) {
  const year = dateTimeString.substring(0, 4);
  const month = dateTimeString.substring(4, 6);
  const day = dateTimeString.substring(6, 8);
  const hours = dateTimeString.substring(8, 10);
  const minutes = dateTimeString.substring(10, 12);
  const seconds = dateTimeString.substring(12, 14);

  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}

const onLoad4 = async () => {
  loading4.value = true;
  applyList4();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading4.value = false;
};
const onLoad5 = async () => {
  loading5.value = true;
  applyList5();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading5.value = false;
};
const onLoad6 = async () => {
  loading6.value = true;
  applyList6();
  if (
    user.getGZCode == undefined ||
    user.getGZCode == '' ||
    history.state.account == '' ||
    history.state.account == undefined
  ) {
    Toast('身份失效,请重新登录');
    router.push('/WX/GZ/WXGZ01');
  }
  wxTotal();
  TsTotal();
  loading6.value = false;
};
const applyList4 = async () => {
  // 工作人员意见列表
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userTs1(postEiInfo)
    .then((res) => {
      page4.result = [];
      // eslint-disable-next-line eqeqeq
      console.log('--1ts:', res.getBlock('userTs1'));
      if (
        !(res.getBlock('userTs1') === undefined) ||
        !(res.getBlock('userTs1') === '') ||
        !(res.getBlock('userTs1') === null)
      ) {
        const data = res.getBlock('userTs1').getRows();
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);
        if (filteredData.length === 0) {
          page4.result = [];
        } else {
          page4.result.push(...filteredData);
        }
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const applyList5 = async () => {
  // 工作人员意见处理完成
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userTs2(postEiInfo)
    .then((res) => {
      page5.result = [];
      // eslint-disable-next-line eqeqeq
      console.log('--2ts:', res.getBlock('userTs2'));
      if (
        !(res.getBlock('userTs2') === undefined) ||
        !(res.getBlock('userTs2') === '') ||
        !(res.getBlock('userTs2') === null)
      ) {
        const data = res.getBlock('userTs2').getRows();
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);
        if (filteredData.length === 0) {
          page5.result = [];
        } else {
          page5.result.push(...filteredData);
        }
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const applyList6 = async () => {
  // 工作人员意见已评价
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userTs3(postEiInfo)
    .then((res) => {
      page6.result = [];
      // eslint-disable-next-line eqeqeq
      console.log('--2ts:', res.getBlock('userTs3'));
      if (
        !(res.getBlock('userTs3') === undefined) ||
        !(res.getBlock('userTs3') === '') ||
        !(res.getBlock('userTs3') === null)
      ) {
        const data = res.getBlock('userTs3').getRows();
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);
        if (filteredData.length === 0) {
          page6.result = [];
        } else {
          page6.result.push(...filteredData);
        }
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};

const applyList1 = async () => {
  // 工作人员维修列表
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userWx(postEiInfo)
    .then((res) => {
      page1.result = [];
      // eslint-disable-next-line eqeqeq
      console.log('--1:', res.getBlock('userWx'));
      if (
        !(res.getBlock('userWx') === undefined) ||
        !(res.getBlock('userWx') === '') ||
        !(res.getBlock('userWx') === null)
      ) {
        const data = res.getBlock('userWx').getRows();
        console.log('--11:', data);
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);

        console.log('--111:', filteredData);

        if (filteredData.length === 0) {
          page1.result = [];
        } else {
          page1.result.push(...filteredData);
        }
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const applyList2 = async () => {
  // 工作人员维修已评价
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userWx1(postEiInfo)
    .then((res) => {
      page2.result = [];
      console.log('--2:', res.getBlock('userWx1'));
      // eslint-disable-next-line eqeqeq
      if (
        !(res.getBlock('userWx1') === undefined) ||
        !(res.getBlock('userWx1') === '') ||
        !(res.getBlock('userWx1') === null)
      ) {
        const data = res.getBlock('userWx1').getRows();
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);
        console.log('--222:', filteredData);
        if (filteredData.length === 0) {
          page2.result = [];
        } else {
          page2.result.push(...filteredData);
        }
      }
      // eslint-disable-next-line n/handle-callback-err
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const applyList3 = async () => {
  // 工作人员维修已评价
  const postEiInfo = new EiInfo();
  const account = history.state.account;
  postEiInfo.set('accounts', account);
  await api4j
    .RCRM0103_userWx2(postEiInfo)
    .then((res) => {
      page3.result = [];
      console.log('--3:', res.getBlock('userWx2'));
      // eslint-disable-next-line eqeqeq
      if (
        !(res.getBlock('userWx2') === undefined) ||
        !(res.getBlock('userWx2') === '') ||
        !(res.getBlock('userWx2') === null)
      ) {
        const data = res.getBlock('userWx2').getRows();
        // 过滤
        const filteredData = data.filter((item, index) => item[14] === user.getGZCode);
        console.log('--333:', filteredData);
        if (filteredData.length === 0) {
          page3.result = [];
        } else {
          page3.result.push(...filteredData);
        }
      }
    })
    .catch((error) => {
      if (error.response && error.response.status === 429) {
        // eslint-disable-next-line no-undef
        Toast('请勿频繁操作');
      }
    });
};
const submit1 = async (item) => {
  Dialog.confirm({
    title: '维修完成',
    message: '确认维修完成吗?'
  })
    .then(async () => {
      // 维修完工操作
      const postEiInfo = new EiInfo();
      postEiInfo.set('repareId', item[8]);
      postEiInfo.set('fileList', '无图片');
      if (!fileList.value.length == 0) {
        // 批量
        const files1 = [];
        const batchSize = 1000; // 设置适当的批次大小
        for (let i = 0; i < fileList.value.length; i += batchSize) {
          const batch = fileList.value
            .slice(i, i + batchSize)
            .map((item) => ({ file: item.content }));
          files1.push(...batch);
        }
        postEiInfo.set('fileList', JSON.stringify(files1));
        setInterval(() => {
          time.value += 1;
        }, 1000);
      }

      await api4j
        .RCRM0103_userSuccess(postEiInfo)
        .then((res) => {
          Toast(res.msg);
          active1 = 1;
          onLoad1();
        })
        .catch((error) => {
          if (error.response && error.response.status === 429) {
            // eslint-disable-next-line no-undef
            Toast('请勿频繁操作');
          }
        });
    })
    .catch(() => {
      // on cancel
    });
};
const submit2 = async (item) => {
  Dialog.confirm({
    title: '意见完成',
    message: '确认意见完成吗?'
  })
    .then(async () => {
      // 意见完工操作
      const postEiInfo = new EiInfo();
      postEiInfo.set('id', item[28]);
      postEiInfo.set('fileList', '无图片');
      if (!fileList1.value.length == 0) {
        // 批量
        const files1 = [];
        const batchSize = 1000; // 设置适当的批次大小
        for (let i = 0; i < fileList1.value.length; i += batchSize) {
          const batch = fileList1.value
            .slice(i, i + batchSize)
            .map((item) => ({ file: item.content }));
          files1.push(...batch);
        }

        postEiInfo.set('fileList', JSON.stringify(files1));
        setInterval(() => {
          time1.value += 1;
        }, 1000);
      }

      await api4j.RCRM0103_userTsSuccess(postEiInfo).then((res) => {
        Toast(res.msg);
        active2 = 1;
        onLoad4();
      });
    })
    .catch(() => {
      // on cancel
    });
};

const fileList = ref([]);
const fileList1 = ref([]);
const time1 = ref(0);
const time = ref(0);
</script>
<template>
  <div>
    <div
      style="
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: #4b75e5;
        height: 65px;
        color: white;
        z-index: 1000;
      "
    >
      <div style="font-size: 20px; padding-top: 20px; text-align: center">工作人员</div>
      <van-button
        to="/WX/GZ/WXGZ01"
        style="
          background-color: #4b75e5;
          color: white;
          display: flex;
          flex-direction: column;
          align-items: center;
          border: 1px solid #4b75e5;
          margin-top: -32px;
          margin-left: 20px;
        "
      >
        <img
          src="@/assets/tb166.svg"
          style="width: 35px; height: 35px; margin-top: 3px; margin-left: -20px"
          alt=""
        />
      </van-button>
    </div>
    <!--    <div style="margin-top: 65px;text-align: center;line-height: 20px;display: flex;background: #4b75e5;color: white">-->
    <!--        <div style="width: 33%;" >报修待处理：<span style="font-size: 20px;color: #3bab68;">1</span></div>-->
    <!--        <div style="width: 33%; " >报修处理完成: <span style="font-size: 20px;color: #ee597c;">2</span></div>-->
    <!--      <div style="width: 33%; " >报修已评价: <span style="font-size: 20px;color: #ff8d1a;">5</span></div>-->
    <!--    </div>-->
    <!--    <div style="margin-top: 1px;text-align: center;line-height: 20px;display: flex;background: #4b75e5;color: white">-->
    <!--      <div style="width: 33%;" >意见待处理：<span style="font-size: 20px;color: #3bab68;">3</span></div>-->
    <!--      <div style="width: 33%;" >意见处理完成: <span style="font-size: 20px;color: #ee597c;">5</span></div>-->
    <!--      <div style="width: 33%;" >意见已评价: <span style="font-size: 20px;color: #ff8d1a;">4</span></div>-->
    <!--    </div>-->
    <van-tabs style="margin-top: 65px">
      <van-tab title="报修" icon="search" :badge="bxTotal" :show-zero-badge="false">
        <van-tabs v-model:active="active1" style="margin-top: 1px">
          <van-tab title="待处理" :badge="bxTotal" :show-zero-badge="false">
            <van-list
              v-model:loading="loading1"
              class="working-list"
              :finished="finish1"
              finished-text=""
              offset="1"
              @load="onLoad1"
            >
              <van-cell-group
                v-for="(item, index) in page1.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      维修单号: {{ item[8] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #d3e9dc;
                        color: #3bab68;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      处理中
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修人: {{ item[29] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修电话: {{ item[1] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修地点: {{ item[36] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修内容: {{ item[30] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[40])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                  </van-image>
                </div>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      附件上传: <span style="color: red">(图片大小不超过5M)</span>
                    </div>
                  </div>

                  <van-uploader v-model="fileList" multiple />
                  <div v-if="fileList.length != 0" style="height: 10px">
                    <van-progress color="#32CD32 " :percentage="time" />
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value item1">
                  <div style="text-align: center">
                    <van-button
                      round
                      style="background-color: #4b75e5; color: white; width: 90%; margin: 0 auto"
                      size="large"
                      @click="submit1(item)"
                      >完工</van-button
                    >
                  </div>
                </van-cell>

                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page1.result.length == 0"
                style="margin-top: 20px; color: gray; text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
          <van-tab title="处理完成">
            <van-list
              v-model:loading="loading3"
              class="working-list"
              :finished="finish3"
              finished-text=""
              offset="1"
              @load="onLoad3"
            >
              <van-cell-group
                v-for="(item, index) in page3.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      维修单号: {{ item[8] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #f6e4e8;
                        color: #ee597c;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      已完成
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修人: {{ item[29] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修电话: {{ item[1] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修地点: {{ item[36] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修内容: {{ item[30] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}
                    </div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[40])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                  </van-image>
                </div>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">完成时间: {{ formatDateTime(item[16]) }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page3.result.length == 0"
                style="margin-top: 20px; color: gray; text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
          <van-tab title="已评价">
            <van-list
              v-model:loading="loading2"
              class="working-list"
              :finished="finish2"
              finished-text=""
              offset="1"
              @load="onLoad2"
            >
              <van-cell-group
                v-for="(item, index) in page2.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      维修单号: {{ item[8] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #faeada;
                        color: #ff8d1a;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      已评价
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修人: {{ item[29] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修电话: {{ item[1] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修地点: {{ item[36] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修内容: {{ item[30] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      维修类型: {{ item[2] == 'A' ? '有偿维修' : '无偿维修' }}
                    </div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[40])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                  </van-image>
                </div>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">评价: {{ item[11] }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      评价满意度:
                      {{
                        item[27] == '3'
                          ? '满意'
                          : item[27] == '2'
                          ? '良好'
                          : item[27] == '1'
                          ? '一般'
                          : item[27] == '0'
                          ? '不满意'
                          : item[27]
                      }}
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">报修时间: {{ formatDateTime(item[32]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">完成时间: {{ formatDateTime(item[16]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page2.result.length == 0"
                style="margin-top: 20px; color: rgb(128, 128, 128); text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-tab>
      <van-tab title="意见" :badge="tsTotal" :show-zero-badge="false">
        <van-tabs v-model:active="active2" style="margin-top: 1px">
          <van-tab title="待处理" :badge="tsTotal" :show-zero-badge="false">
            <van-list
              v-model:loading="loading4"
              class="working-list"
              :finished="finish4"
              finished-text=""
              offset="1"
              @load="onLoad4"
            >
              <van-cell-group
                v-for="(item, index) in page4.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      意见单号: {{ item[28] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #d3e9dc;
                        color: #3bab68;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      处理中
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人: {{ item[13] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人电话: {{ item[4] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见地址: {{ item[9] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">内容: {{ item[22] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      意见类别:
                      {{
                        item[10] == 'T'
                          ? '电话意见'
                          : item[10] == 'Q'
                          ? '前台意见'
                          : item[10] == 'W'
                          ? '微信意见'
                          : ''
                      }}
                    </div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[35])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                    <!--                <template #loading>-->
                    <!--                  <van-loading type="spinner" size="20" />-->
                    <!--                </template>-->
                    <!--                <template #error>加载失败</template>-->
                  </van-image>
                </div>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      附件上传: <span style="color: red">(图片大小不超过5M)</span>
                    </div>
                  </div>

                  <van-uploader v-model="fileList1" multiple />
                  <div v-if="fileList1.length != 0" style="height: 10px">
                    <van-progress color="#32CD32 " :percentage="time1" />
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见时间: {{ formatDateTime(item[29]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value item1">
                  <div style="text-align: center">
                    <van-button
                      round
                      style="background-color: #4b75e5; color: white; width: 90%; margin: 0 auto"
                      size="large"
                      @click="submit2(item)"
                      >完工</van-button
                    >
                  </div>
                </van-cell>
                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page4.result.length == 0"
                style="margin-top: 20px; color: gray; text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
          <van-tab title="处理完成">
            <van-list
              v-model:loading="loading5"
              class="working-list"
              :finished="finish5"
              finished-text=""
              offset="1"
              @load="onLoad5"
            >
              <van-cell-group
                v-for="(item, index) in page5.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      意见单号: {{ item[28] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #f6e4e8;
                        color: #ee597c;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      已完成
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人: {{ item[13] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人电话: {{ item[4] }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见地址: {{ item[9] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">内容: {{ item[22] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      意见类别:
                      {{
                        item[10] == 'T'
                          ? '电话意见'
                          : item[10] == 'Q'
                          ? '前台意见'
                          : item[10] == 'W'
                          ? '微信意见'
                          : ''
                      }}
                    </div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[35])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                    <!--                <template #loading>-->
                    <!--                  <van-loading type="spinner" size="20" />-->
                    <!--                </template>-->
                    <!--                <template #error>加载失败</template>-->
                  </van-image>
                </div>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见时间: {{ formatDateTime(item[29]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">完成时间: {{ formatDateTime(item[16]) }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page5.result.length == 0"
                style="margin-top: 20px; color: gray; text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
          <van-tab title="已评价">
            <van-list
              v-model:loading="loading6"
              class="working-list"
              :finished="finish6"
              finished-text=""
              offset="1"
              @load="onLoad6"
            >
              <van-cell-group
                v-for="(item, index) in page6.result"
                :key="index"
                class="card-item"
                inset
              >
                <van-cell class="item-value group1">
                  <div class="group1" style="display: flex">
                    <div class="titles" style="font-size: 15px; font-weight: bolder">
                      意见单号: {{ item[28] }}
                    </div>
                    <div
                      style="
                        margin-left: 40%;
                        width: 50px;
                        text-align: center;
                        background: #faeada;
                        color: #ff8d1a;
                        border: 1px solid white;
                        border-radius: 10px;
                      "
                    >
                      已评价
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人: {{ item[13] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见人电话: {{ item[4] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见地址: {{ item[9] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">内容: {{ item[22] }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      意见类别:
                      {{
                        item[10] == 'T'
                          ? '电话意见'
                          : item[10] == 'Q'
                          ? '前台意见'
                          : item[10] == 'W'
                          ? '微信意见'
                          : ''
                      }}
                    </div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">图片:</div>
                  </div>
                </van-cell>
                <div style="text-align: center; line-height: 0">
                  <van-image
                    v-for="(items, indexs) in JSON.parse(item[35])"
                    :key="indexs"
                    width="300"
                    :src="api4j.getImageUrl(items)"
                    style="margin: 5px; display: inline-block"
                  >
                    <!--                <template #loading>-->
                    <!--                  <van-loading type="spinner" size="20" />-->
                    <!--                </template>-->
                    <!--                <template #error>加载失败</template>-->
                  </van-image>
                </div>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">评价: {{ item[12] }}</div>
                  </div>
                </van-cell>

                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">
                      评价满意度:
                      {{
                        item[27] == '3'
                          ? '满意'
                          : item[27] == '2'
                          ? '良好'
                          : item[27] == '1'
                          ? '一般'
                          : item[27] == '0'
                          ? '不满意'
                          : item[27]
                      }}
                    </div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">意见时间: {{ formatDateTime(item[29]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value group1">
                  <div class="group1">
                    <div class="titles">完成时间: {{ formatDateTime(item[16]) }}</div>
                  </div>
                </van-cell>
                <van-cell class="item-value">
                  <div class="group1">
                    <div class="title1"></div>
                  </div>
                </van-cell>
              </van-cell-group>
              <div
                v-if="page6.result.length == 0"
                style="margin-top: 20px; color: gray; text-align: center"
              >
                暂无数据
              </div>
            </van-list>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style lang="stylus" scoped>
.page-main

  .working-list
    .item1
      padding-top 0px
      padding-bottom 0px
    .title1
      color #003586
      //font-weight bolder
      font-size 13px
    .titles
      color #161718
      //font-weight bolder
      font-size 13px
    .titless
      color #161718
      //font-weight bolder
      font-size 17px
    .title2
      color #808080
      font-size 13px
    padding 4px
    margin-bottom 48px
    .van-tag
      margin-left 5px
      font-size 12px
      padding 5px
    .btn1
      background-color #038008
      border-radius 5px
      margin-left 5px
    .btn0
      background-color #ff8d1a
      border-radius 5px
      margin-left 5px
    .class1
      background-color #99bcf1
      border-radius 5px
    .class2
      background-color #f19999
      border-radius 5px
    .class3
      background-color #99a6f1
      border-radius 5px
    .card-item
      margin 8px
      background-color white

      .item-value
        display flex
        justify-content space-between
        overflow hidden
        text-overflow ellipsis
        word-break keep-all
        white-space nowrap
        background-color transparent
        .group1
          display flex
          flex-direction row
          justify-content space-between

  .bottom-buttons
    position fixed
    bottom 12px
    left auto
    width 100%
    max-width var(--max-width)
</style>
